<script setup lang="ts">

</script>


<template>
  <div class="column-center">

    <!-- 工具库模块 -->
    <div class="container mx-auto px-4 py-8">
      <!-- 标题栏 -->
      <div class="tool-header mb-8">
        <div class="flex flex-col md:flex-row md:justify-between md:items-end">
          <div class="header-left mb-4 md:mb-0">
            <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-800">工具库</h2>
            <p class="text-gray-500 mt-1">用技术解决重复工作，提升效率</p>
          </div>

          <div class="header-right flex flex-col sm:flex-row gap-4 w-full md:w-auto">
            <div class="relative flex-grow max-w-md">
              <input type="text"
                     placeholder="搜索工具或用途（如'工资统计'）"
                     class="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition"
              >
              <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
            </div>

            <select
                class="w-full sm:w-auto px-4 py-2 border border-gray-200 rounded-lg bg-white text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition">
              <option value="hot">按热度排序</option>
              <option value="new">按最新排序</option>
            </select>
          </div>
        </div>
      </div>

      <!-- 分类导航 -->
      <div class="tool-categories mb-8 overflow-x-auto pb-2">
        <div class="flex space-x-1 md:space-x-6 min-w-max">
          <button class="category-btn category-active px-4 py-2 text-sm font-medium whitespace-nowrap transition">
            全部工具
          </button>
          <button
              class="category-btn text-gray-600 px-4 py-2 text-sm font-medium whitespace-nowrap hover:text-primary transition">
            办公效率
          </button>
          <button
              class="category-btn text-gray-600 px-4 py-2 text-sm font-medium whitespace-nowrap hover:text-primary transition">
            Python脚本
          </button>
          <button
              class="category-btn text-gray-600 px-4 py-2 text-sm font-medium whitespace-nowrap hover:text-primary transition">
            趣味代码
          </button>
          <button
              class="category-btn text-gray-600 px-4 py-2 text-sm font-medium whitespace-nowrap hover:text-primary transition">
            实用小工具
          </button>
          <button
              class="category-btn text-gray-600 px-4 py-2 text-sm font-medium whitespace-nowrap hover:text-primary transition">
            数据处理
          </button>
        </div>
      </div>

      <!-- 工具列表 -->
      <div class="tool-list grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
        <!-- 工具卡片1 -->
        <div
            class="tool-card bg-white rounded-xl overflow-hidden tool-card-shadow hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1">
          <div class="tool-img h-40 bg-light flex items-center justify-center p-4">
            <img src="https://picsum.photos/id/180/300/200" alt="Excel工资表统计"
                 class="max-h-full max-w-full object-contain">
          </div>
          <div class="p-5">
            <span class="inline-block px-2 py-1 text-xs bg-blue-50 text-primary rounded-full mb-3">办公效率</span>
            <h3 class="tool-name text-lg font-semibold text-gray-800 mb-2">Excel工资表快速统计</h3>
            <p class="tool-desc text-gray-600 text-sm mb-4 line-clamp-2">
              上传Excel工资表，1秒生成部门薪资汇总、个税计算，告别手动算表
            </p>
            <div class="flex space-x-2">
              <button class="flex-1 px-3 py-2 text-sm text-white bg-primary rounded hover:bg-primary/90 transition">
                立即使用
              </button>
              <button
                  class="px-3 py-2 text-sm border border-gray-200 text-gray-600 rounded hover:bg-gray-50 transition">
                <i class="fa fa-star-o"></i>
              </button>
            </div>
          </div>
        </div>

        <!-- 工具卡片2 -->
        <div
            class="tool-card bg-white rounded-xl overflow-hidden tool-card-shadow hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1">
          <div class="tool-img h-40 bg-light flex items-center justify-center p-4">
            <img src="https://picsum.photos/id/0/300/200" alt="Python自动录入工具"
                 class="max-h-full max-w-full object-contain">
          </div>
          <div class="p-5">
            <span class="inline-block px-2 py-1 text-xs bg-green-50 text-green-600 rounded-full mb-3">Python脚本</span>
            <h3 class="tool-name text-lg font-semibold text-gray-800 mb-2">Python自动录入工具</h3>
            <p class="tool-desc text-gray-600 text-sm mb-4 line-clamp-2">
              自动读取Excel数据，批量录入到网页表单，避免手动重复操作
            </p>
            <div class="flex space-x-2">
              <button class="flex-1 px-3 py-2 text-sm text-white bg-primary rounded hover:bg-primary/90 transition">
                查看教程
              </button>
              <button
                  class="px-3 py-2 text-sm border border-gray-200 text-gray-600 rounded hover:bg-gray-50 transition">
                <i class="fa fa-star-o"></i>
              </button>
            </div>
          </div>
        </div>

        <!-- 工具卡片3 -->
        <div
            class="tool-card bg-white rounded-xl overflow-hidden tool-card-shadow hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1">
          <div class="tool-img h-40 bg-light flex items-center justify-center p-4">
            <img src="https://picsum.photos/id/24/300/200" alt="HTML爱心代码"
                 class="max-h-full max-w-full object-contain">
          </div>
          <div class="p-5">
            <span class="inline-block px-2 py-1 text-xs bg-pink-50 text-pink-600 rounded-full mb-3">趣味代码</span>
            <h3 class="tool-name text-lg font-semibold text-gray-800 mb-2">HTML动态爱心代码</h3>
            <p class="tool-desc text-gray-600 text-sm mb-4 line-clamp-2">
              多种动态爱心效果，支持自定义文字和颜色，可直接复制使用
            </p>
            <div class="flex space-x-2">
              <button class="flex-1 px-3 py-2 text-sm text-white bg-primary rounded hover:bg-primary/90 transition">
                在线预览
              </button>
              <button
                  class="px-3 py-2 text-sm border border-gray-200 text-gray-600 rounded hover:bg-gray-50 transition">
                <i class="fa fa-star-o"></i>
              </button>
            </div>
          </div>
        </div>

        <!-- 工具卡片4 -->
        <div
            class="tool-card bg-white rounded-xl overflow-hidden tool-card-shadow hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1">
          <div class="tool-img h-40 bg-light flex items-center justify-center p-4">
            <img src="https://picsum.photos/id/160/300/200" alt="数据格式转换"
                 class="max-h-full max-w-full object-contain">
          </div>
          <div class="p-5">
            <span class="inline-block px-2 py-1 text-xs bg-purple-50 text-purple-600 rounded-full mb-3">数据处理</span>
            <h3 class="tool-name text-lg font-semibold text-gray-800 mb-2">数据格式转换工具</h3>
            <p class="tool-desc text-gray-600 text-sm mb-4 line-clamp-2">
              支持JSON/Excel/CSV格式互转，保留数据结构，处理大量数据更高效
            </p>
            <div class="flex space-x-2">
              <button class="flex-1 px-3 py-2 text-sm text-white bg-primary rounded hover:bg-primary/90 transition">
                立即使用
              </button>
              <button
                  class="px-3 py-2 text-sm border border-gray-200 text-gray-600 rounded hover:bg-gray-50 transition">
                <i class="fa fa-star-o"></i>
              </button>
            </div>
          </div>
        </div>

        <!-- 工具卡片5 -->
        <div
            class="tool-card bg-white rounded-xl overflow-hidden tool-card-shadow hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1">
          <div class="tool-img h-40 bg-light flex items-center justify-center p-4">
            <img src="https://picsum.photos/id/48/300/200" alt="图片批量处理"
                 class="max-h-full max-w-full object-contain">
          </div>
          <div class="p-5">
            <span
                class="inline-block px-2 py-1 text-xs bg-yellow-50 text-yellow-600 rounded-full mb-3">实用小工具</span>
            <h3 class="tool-name text-lg font-semibold text-gray-800 mb-2">图片批量压缩工具</h3>
            <p class="tool-desc text-gray-600 text-sm mb-4 line-clamp-2">
              批量压缩图片大小，保持清晰度，支持JPG/PNG格式，适合网页优化
            </p>
            <div class="flex space-x-2">
              <button class="flex-1 px-3 py-2 text-sm text-white bg-primary rounded hover:bg-primary/90 transition">
                立即使用
              </button>
              <button
                  class="px-3 py-2 text-sm border border-gray-200 text-gray-600 rounded hover:bg-gray-50 transition">
                <i class="fa fa-star-o"></i>
              </button>
            </div>
          </div>
        </div>

        <!-- 工具卡片6 -->
        <div
            class="tool-card bg-white rounded-xl overflow-hidden tool-card-shadow hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1">
          <div class="tool-img h-40 bg-light flex items-center justify-center p-4">
            <img src="https://picsum.photos/id/96/300/200" alt="Python文件处理"
                 class="max-h-full max-w-full object-contain">
          </div>
          <div class="p-5">
            <span class="inline-block px-2 py-1 text-xs bg-green-50 text-green-600 rounded-full mb-3">Python脚本</span>
            <h3 class="tool-name text-lg font-semibold text-gray-800 mb-2">Python批量重命名脚本</h3>
            <p class="tool-desc text-gray-600 text-sm mb-4 line-clamp-2">
              按规则批量重命名文件，支持自定义命名格式，处理大量文件超方便
            </p>
            <div class="flex space-x-2">
              <button class="flex-1 px-3 py-2 text-sm text-white bg-primary rounded hover:bg-primary/90 transition">
                查看教程
              </button>
              <button
                  class="px-3 py-2 text-sm border border-gray-200 text-gray-600 rounded hover:bg-gray-50 transition">
                <i class="fa fa-star-o"></i>
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 分页 -->
      <div class="pagination flex justify-center mt-12">
        <button
            class="page-btn px-4 py-2 border border-gray-200 rounded-l-lg text-gray-600 hover:bg-gray-50 disabled:opacity-50"
            disabled>
          <i class="fa fa-angle-left"></i>
        </button>
        <button class="page-btn px-4 py-2 border-t border-b border-gray-200 text-primary bg-primary/5">1</button>
        <button class="page-btn px-4 py-2 border-t border-b border-gray-200 text-gray-600 hover:bg-gray-50">2</button>
        <button class="page-btn px-4 py-2 border-t border-b border-gray-200 text-gray-600 hover:bg-gray-50">3</button>
        <button class="page-btn px-4 py-2 border border-gray-200 rounded-r-lg text-gray-600 hover:bg-gray-50">
          <i class="fa fa-angle-right"></i>
        </button>
      </div>
    </div>

  </div>
</template>

<style scoped>



</style>